﻿<UserControl x:Class="VosSoft.ZuneLcd.Color.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:VosSoft.ZuneLcd.Color"
    Width="320" Height="240" Background="Black">
    <UserControl.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontFamily" Value="Calibri" />
        </Style>

        <Style TargetType="{x:Type local:TrackListBoxItem}">
            <Style.Resources>
                <LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="#AAD90C92" Offset="0" />
                    <GradientStop Color="#00D90C92" Offset="1" />
                </LinearGradientBrush>
            </Style.Resources>
        </Style>

        <ControlTemplate x:Key="StopIcon" TargetType="{x:Type UserControl}">
            <Viewbox>
                <Grid>
                    <Ellipse Width="100" Height="100" Stroke="Silver" StrokeThickness="5">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="Black" Opacity="0.3" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <Rectangle Width="32" Height="32" Fill="White" />
                </Grid>
            </Viewbox>
        </ControlTemplate>

        <ControlTemplate x:Key="PlayIcon" TargetType="{x:Type UserControl}">
            <Viewbox>
                <Grid>
                    <Ellipse Width="100" Height="100" Stroke="Silver" StrokeThickness="5">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="Black" Opacity="0.3" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <Polygon Points="5,0 5,36 32,18" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </Viewbox>
        </ControlTemplate>

        <ControlTemplate x:Key="PauseIcon" TargetType="{x:Type UserControl}">
            <Viewbox>
                <Grid>
                    <Ellipse Width="100" Height="100" Stroke="Silver" StrokeThickness="5">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="Black" Opacity="0.3" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <Rectangle Width="12" Height="37" Fill="White" Margin="0,0,20,0" />
                    <Rectangle Width="12" Height="37" Fill="White" Margin="20,0,0,0" />
                </Grid>
            </Viewbox>
        </ControlTemplate>

        <ControlTemplate x:Key="FastForwardIcon" TargetType="{x:Type UserControl}">
            <Viewbox>
                <Grid>
                    <Ellipse Width="100" Height="100" Stroke="Silver" StrokeThickness="5">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="Black" Opacity="0.3" />
                        </Ellipse.Fill>
                    </Ellipse>
                    <Polygon Points="5,0 5,36 32,18" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,27,0" />
                    <Polygon Points="5,0 5,36 32,18" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="27,0,0,0" />
                </Grid>
            </Viewbox>
        </ControlTemplate>

        <BitmapImage x:Key="MuteOffIcon" UriSource="Resources/MuteOff.png" />
        <BitmapImage x:Key="MuteOnIcon" UriSource="Resources/MuteOn.png" />

        <BitmapImage x:Key="RepeatOffIcon" UriSource="Resources/RepeatOff.png" />
        <BitmapImage x:Key="RepeatOnIcon" UriSource="Resources/RepeatOn.png" />

        <BitmapImage x:Key="ShuffleOffIcon" UriSource="Resources/ShuffleOff.png" />
        <BitmapImage x:Key="ShuffleOnIcon" UriSource="Resources/ShuffleOn.png" />

        <BitmapImage x:Key="RatingInvalidIcon" UriSource="Resources/RatingInvalid.png" />
        <BitmapImage x:Key="RatingUnratedIcon" UriSource="Resources/RatingUnrated.png" />
        <BitmapImage x:Key="RatingLikeIcon" UriSource="Resources/RatingLike.png" />
        <BitmapImage x:Key="RatingDontLikeIcon" UriSource="Resources/RatingDontLike.png" />

        <DrawingImage x:Key="DefaultBackground">
            <DrawingImage.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Brush>
                        <RadialGradientBrush GradientOrigin="0.5,0.3">
                            <GradientStop Color="#665E64" Offset="0.0" />
                            <GradientStop Color="#181116" Offset="0.75" />
                            <GradientStop Color="#11090F" Offset="1.0" />
                        </RadialGradientBrush>
                    </GeometryDrawing.Brush>
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry>
                            <RectangleGeometry.Rect>
                                <Rect X="0" Y="0" Width="320" Height="240" />
                            </RectangleGeometry.Rect>
                        </RectangleGeometry>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingImage.Drawing>
        </DrawingImage>
        
        <Storyboard x:Key="PageTransitionRight">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" By="320" Duration="0:0:0.5" AccelerationRatio="0.8" DecelerationRatio="0.2" />
        </Storyboard>

        <Storyboard x:Key="PageTransitionLeft">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" By="-320" Duration="0:0:0.5" AccelerationRatio="0.8" DecelerationRatio="0.2" />
        </Storyboard>

        <Storyboard x:Key="TrackTransitionOut" Completed="TrackTransitionOut_Completed">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0.8" Duration="0:0:0.2" DecelerationRatio="0.5" />
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="0" To="15" Duration="0:0:0.2" AccelerationRatio="0.5" />

            <DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="0:0:0.2" To="0" Duration="0:0:0.3" AccelerationRatio="1" />
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" BeginTime="0:0:0.2" To="35" Duration="0:0:0.3" AccelerationRatio="1"/>
        </Storyboard>

        <Storyboard x:Key="TrackTransitionIn">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="0:0:0.5" />
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="-20" To="0" Duration="0:0:1" AccelerationRatio="0.2" DecelerationRatio="0.8" />
        </Storyboard>

        <Storyboard x:Key="DynamicTransitionOut" Completed="DynamicTransitionOut_Completed">
            <DoubleAnimation Storyboard.TargetProperty="(TextBox.Opacity)" From="1" To="0" Duration="0:0:0.2" />
        </Storyboard>

        <Storyboard x:Key="DynamicTransitionIn">
            <DoubleAnimation Storyboard.TargetProperty="(TextBox.Opacity)" From="0" To="1" Duration="0:0:0.3" />
        </Storyboard>
    </UserControl.Resources>

    <Grid>

        <!-- BACKGROUND IMAGE -->
        <Grid.Background>
            <ImageBrush ImageSource="{Binding ElementName=imgCover, Path=Source}" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center" Opacity="0.3" />
        </Grid.Background>

        <!-- MAIN PAGE -->
        <Grid Name="gridMain" Margin="0,24,0,50">
            <Grid.RenderTransform>
                <TranslateTransform X="0" />
            </Grid.RenderTransform>
            <StackPanel VerticalAlignment="Center">
                <TextBlock Name="txtArtist" FontSize="18pt" FontWeight="Bold" Text="Zune LCD" TextAlignment="Center" TextTrimming="CharacterEllipsis" />
                <TextBlock Name="txtAlbum" Margin="0,-2,0,10" FontSize="14pt" Text="Version 0.3 beta" TextAlignment="Center" TextTrimming="CharacterEllipsis" />
                <TextBlock Name="txtTitle" FontSize="14pt" Text="Copyright © VosSoft 2010, 2011" TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" />
            </StackPanel>
        </Grid>
        <!-- END MAIN PAGE -->

        <!-- TRACKLIST PAGE -->
        <Grid Name="gridTracks" Margin="0,24,0,50">
            <Grid.RenderTransform>
                <TranslateTransform X="-320" />
            </Grid.RenderTransform>
            <ListBox Name="lstTracks" Background="Transparent" BorderThickness="0" VerticalAlignment="Center"
                     ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
        </Grid>
        <!-- END TRACKLIST PAGE -->

        <!-- TOP BAR -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <UserControl Name="ucTrackStateIcon" Template="{StaticResource StopIcon}" Margin="10,-5,0,0" Width="32" Height="32" HorizontalAlignment="Left" VerticalAlignment="Top" />

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,6,0,0" Grid.Column="1">
                <Image Name="imgRepeatIcon" Source="{StaticResource RepeatOffIcon}" Width="12" Height="11" />
                <Image Name="imgShuffleIcon" Source="{StaticResource ShuffleOffIcon}" Width="11" Height="11" Margin="15,0,0,0" />
            </StackPanel>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,5,10,0" Grid.Column="2">
                <Image Name="imgMuteIcon" Source="{StaticResource MuteOffIcon}" Width="17" Height="13" VerticalAlignment="Center" />
                <local:ZuneProgressBar x:Name="prgVolume" Width="64" Height="3" Margin="5,0,10,0" VerticalAlignment="Center" />
                <TextBlock Name="txtVolume" FontSize="10pt" Foreground="Silver" Text="00" VerticalAlignment="Center" />
            </StackPanel>
        </Grid>
        <!-- END TOP BAR -->

        <!-- BOTTOM BAR -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Border Name="brdCover" Visibility="Collapsed" MaxWidth="64" MaxHeight="52" VerticalAlignment="Bottom" BorderThickness="2" BorderBrush="White" SnapsToDevicePixels="True">
                <Image Name="imgCover" Source="{StaticResource DefaultBackground}" />
            </Border>
            
            <StackPanel Margin="4,0" VerticalAlignment="Bottom" Grid.Column="1">
                <DockPanel LastChildFill="False">
                    <TextBlock Name="txtDynamic" FontSize="14pt" TextTrimming="CharacterEllipsis" MaxWidth="240" DockPanel.Dock="Left" />
                    <Image Name="imgRatingIcon" Source="{StaticResource RatingInvalidIcon}" Width="11" Height="11" VerticalAlignment="Center" DockPanel.Dock="Right" />
                </DockPanel>
                <local:ZuneProgressBar x:Name="prgPosition" Height="3" Margin="0,4,0,2" />
                <DockPanel LastChildFill="False">
                    <TextBlock Name="txtPosition" FontSize="12pt" Text="0:00" DockPanel.Dock="Left" />
                    <TextBlock Name="txtDuration" Foreground="Silver" FontSize="12pt" Text="0:00" DockPanel.Dock="Right" />
                </DockPanel>
            </StackPanel>
        </Grid>
        <!-- END BOTTOM BAR -->
        
    </Grid>
</UserControl>
